import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link } from 'react-router';


class DetailSlider extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
  }
  componentDidMount() {
    $('.like-toggle').click(function() {
      $(this).toggleClass('active');
    });
  }

  render() {

    let listItemss =this.state.data.imageitems ? this.state.data.imageitems.map((item,i)=>
        <div className="swiper-slide" key={i}>
          <a href="javascript:;">
            <img className="slideImg" src={item.url} alt="pic"/>
          </a>
        </div>
    ):'';

    let adwordArray = this.state.data.adwords.split(',');

    let adwordItems = adwordArray.map((word)=>
        <span className="label label-success" key={word}>word</span>
    );

    return (
      <div>

        <div className="swiper-container" id="ds">
          <div className="swiper-wrapper">
            {listItemss}
          </div>
          <div className='like'>
            <button className='like-toggle two'><span className="glyphicon glyphicon-heart"></span></button>
          </div>
          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>
        </div>

        <div className="col-xs-12 detail-info">
          <p className="title-info">
            {this.state.data.title}
            <span>起拍价 :
              <span className="price">{this.state.data.start_price}</span>
            </span>
          </p>
          <div className="labels">
            {adwordItems}
          </div>
        </div>

      </div>
    )
  }
}

export default DetailSlider
